<script setup>
</script>
<template>
    <div class="contain">
        <div class="skill-pane">
            <p class="title">前端</p>
            <p class="text">HTML5 + CSS3 + JavaScript</p>
            <p class="text">Vue3 + ELement Plus + Echarts</p>
            <p class="text">ThreeJs</p>
            <p class="hr"></p>
            <p class="title">后端</p>
            <p class="text">Java</p>
            <p class="text">Node.js</p>
            <p class="hr"></p>
            <p class="title">数字媒体</p>
            <p class="text">PS + PR + AE</p>
            <p class="hr"></p>
            <p class="title">建模</p>
            <p class="text">Blender</p>
        </div>
        <img src="../../assets/layout/skill-font.png" alt="skill-font" class="skill-font">
    </div>
</template>
<style lang="scss" scoped>
.contain {
    width: 100%;
    height: 100%;
    display: flex;
    position: relative;

    .skill-pane {
        padding-left: 200px;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;

        p {
            font-size: 28px;
            margin: 10px 0;
            color: white;
        }

        p.title {
            font-size: 36px
        }

        .hr {
            width: 450px;
            border: none;
            border-bottom: 1px solid #fff
        }
    }

    .skill-font {
        position: absolute;
        top: 64px;
        right: 64px;
        width: 256px;
        height: 256px;
    }

    @media (max-width: 820px) {
        .skill-pane {
            padding-left: 16px;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;

            p {
                font-size: 20px;
                margin: 10px 0;
                color: white;
            }

            p.title {
                font-size: 20px
            }

            .hr {
                width: 260px;
                border: none;
                border-bottom: 1px solid #fff
            }
        }

        .skill-font {
            right: 0px;
        }
    }
}
</style>